<!-- 审批 检测任务单(委托型) -->
<template>
  <div class="dialog-container" id="dialog-container">
    <el-dialog v-dialogDrag :fullscreen="isFullScreen" :custom-class="isFullScreen?'fullscreen-default-dialog':'vertical-center-dialog'" append-to-body :close-on-click-modal="false" :visible.sync="dialogVisible" @close="$emit('update:show', false)" :before-close="handleClose"
      :show="show" width="800px">
      <div slot="title">
        <span style="color:white;">审批</span>
        <button type="button" aria-label="fullScreen" class="el-dialog__headerbtn" style="margin-right:25px;" @click="isFullScreen = !isFullScreen">
                                    <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
                                  </button>
      </div>
      <div style="overflow: hidden;">
        <img src="../../../../assets/images/sagw.png" style="float:left;">
        <h2 style="text-align:center;">检测任务单审批（委托型）</h2>
      </div>
      <el-form :model="form" ref="form" :rules="rules" :inline="true" label-width="130px" size="small">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="first">
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托单号：" prop="taskNo">
                  <el-input v-model="form.taskNo" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托日期：" prop="applyTime">
                  <el-input v-model="form.applyTime" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务类型：" prop="taskType">
                  <!-- <el-input v-model="form.taskTypeStr" disabled></el-input> -->
                  {{getType(form.taskType)}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托部门：" prop="applyOrgName">
                  {{form.applyUser.org?form.applyUser.org.name:''}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托人：" prop="applyUser">
                  <el-input v-model="form.applyUser.name" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="需求完成日期：" prop="expectCompleteTime">
                  <el-date-picker v-model="form.expectCompleteTime" type="date" style="width: 200px;" disabled></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                实验室将尽力配合,但不承诺在需求完成日期内完成。
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="零件信息" name="second">
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目号：" prop="projectNo">
                  <el-input v-model="form.projectNo" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="零件号：" prop="partNumber">
                  <el-input v-model="form.partNumber" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="零件图号：" prop="partGraphNumber">
                  <el-input v-model="form.partGraphNumber" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="零件名称：" prop="partName">
                  <el-input v-model="form.partName" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="材料牌号：" prop="materialNo">
                  <el-input v-model="form.materialNo" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="批次零件总数量：" prop="totalPartNo">
                  <el-input v-model="form.totalPartNo" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="样品状态阶段：" prop="sampleStatusPhase">
                  <el-select v-model="form.sampleStatusPhase" disabled placeholder="请选择" style="width: 200px;">
                    <el-option v-for="item in sampleStatusPhaseList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="原材料炉号：" prop="materialFurnanceNumber">
                  <el-input v-model="form.materialFurnanceNumber" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="样品信息" name="third">
            <el-row>
              <el-col :span="12">
                <el-form-item label="热处理炉号：" prop="heatingNumber">
                  <el-input v-model="form.heatingNumber" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- <el-form-item label="样品状态：" prop="sampleStatus">
                  <el-input v-model="form.sampleStatus" disabled></el-input>
                </el-form-item> -->
                <el-form-item label="样品状态：" prop="sampleStatus"> 
                    <el-select v-model="form.sampleStatus" disabled placeholder="请选择" style="width: 200px;">
                      <el-option v-for="item in sampleStatusDropList" :key="item.code" :label="item.name" :value="item.code">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="样品数量：" prop="quantity">
                  <el-input v-model="form.quantity" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="批次信息：" prop="batchNumber">
                  <el-input v-model="form.batchNumber" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="供应厂商：" prop="provider">
                  <el-input v-model="form.provider" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注：" prop="remark">
                  <el-input type="textarea" v-model="form.remark" disabled style="width: 580px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>任务内容、目的与需求：</span>
          </div>
          <el-row>
            <el-col :span="22" :offset="2">
              <el-form-item label="" prop="taskTarget">
                <el-radio-group v-model="form.taskTarget" disabled>
                  <el-radio label="新产品试制">新产品试制</el-radio>
                  <el-radio label="常规均匀性实验">常规均匀性实验</el-radio>
                  <el-radio label="失效零件分析">失效零件分析</el-radio><br>
                  <el-radio label="复检">复检</el-radio>
                  <el-radio label="设备新增/大修验收">设备新增/大修验收</el-radio>
                  <el-radio label="其他">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-table :data="tableData">
          <el-table-column prop="displayId" label="编号" align="center" width="120"></el-table-column>
          <el-table-column prop="fieldName" label="检测项目" align="center" width="150"></el-table-column>
          <el-table-column prop="testPart" label="检测位置" align="center" width="150">
            <template slot-scope="scope">
                                              {{getPosition(scope.row.testPart)}}
</template>
          </el-table-column>
          <el-table-column prop="standardName" label="检测要求" align="center" width="360"></el-table-column>
          <el-table-column prop="standardInfo" label="检测标准" align="center" width="150">
          </el-table-column>
         <!-- <el-table-column label="实测数据">
            <el-table-column prop="act1" label="1" align="center" width="50"></el-table-column>
            <el-table-column prop="act2" label="2" align="center" width="50"></el-table-column>
            <el-table-column prop="act3" label="3" align="center" width="50"></el-table-column>
            <el-table-column prop="act4" label="4" align="center" width="50"></el-table-column>
            <el-table-column prop="act5" label="5" align="center" width="50"></el-table-column>
          </el-table-column>
          <el-table-column prop="device" label="检测设备" align="center" width="200"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center" width="200"></el-table-column>-->
        </el-table>
        <hr>
        <el-row>
          <el-col :span="22">
            <el-form-item label="审批情况：" prop="result">
              <el-radio-group v-model="form.result">
                <el-radio :label="1">同意</el-radio>
                <el-radio :label="0">不同意</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="审批理由：" prop="reason">
              <el-input type="textarea" v-model="form.reason" style="width: 568px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="12">
            <el-form-item label="审批人：">
              <el-input v-model="approver" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCheck('form')">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import SelectPartNumber from '../select-part-number-button'; // 选择零件号
  import {
    changeFormitemSpace,
    getLableFromList
  } from '../../../../utils/common' // 表单验证有误时，改变表单的上下间距
  import {
    APPLY_TYPE_LIST
  } from '../../../../service/constant'
  import {
    getApplyInfoByIdService,
    postApplyAuditService,
    getPositionList,getUserInfo,
    getSampleStatusPhase,
    getSampleStatusDrop
  } from 'service/task';
  export default {
    components: {
      'select-part-number-button': SelectPartNumber,
    },
    data() {
      return {
        sampleStatusDropList:[],
        isFullScreen: false,
        dialogVisible: this.show,
        activeName: 'first',
        sampleStatusPhaseList: [],
        approver:'',
        form: {
          taskNo: '',
          applyTime: '',
          taskType: '',
          applyOrgName: '',
          applyUser: {},
          expectCompleteTime: '',
          projectNo: '',
          partNumber: '',
          partGraphNumber: '',
          partName: '',
          materialNo: '',
          totalPartNo: '',
          sampleStatusPhase: '',
          materialFurnanceNumber: '',
          heatingNumber: '',
          sampleStatus: '',
          quantity: '',
          batchNumber: '',
          provider: '',
          remark: '',
          taskTarget: '',
          result: 1,
          reason: '',
          //approver: localStorage.getItem("username")
        },
        rules: {

        },
        tableData: []
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      orderid: {
        type: String
      }
    },
    mounted() {
      getPositionList().then(res1 => {

        this.positionList = res1.data.result;
      });
      getSampleStatusPhase().then(res => {
        this.sampleStatusPhaseList = res.data.result;
      })
      getSampleStatusDrop().then(res => {
        this.sampleStatusDropList = res.data.result;
      })
      getUserInfo("/user/info")
                .then(res => {
                  // if (res.data.result.org) {
                  //   //this.form.applyOrgName = res.data.result.org.name;
                  // }
                  this.approver = res.data.result.name;
                })
    },
    watch: {

      show() {
        this.dialogVisible = this.show;
        if (this.dialogVisible) {
          this.activeName = 'first';
          getApplyInfoByIdService(this.orderid)
            .then(res => {
              // this.form.taskNo = ;
              // this.form.applyTime = res.data.result.applyTime;
              // this.form.taskType = res.data.result.taskType;
              // this.form.applyOrgName = res.data.result.applyUser.org.name;
              // this.form.applyUser = res.data.result.applyUser.name;
              // this.form.expectCompleteTime = res.data.result.expectCompleteTime;
              // this.form.projectNo = res.data.result.projectNo;
              // this.form.partNumber = res.data.result.partNumber;
              // this.form.partGraphNumber = res.data.result.partGraphNumber;
              // this.form.partName = res.data.result.partName;
              // this.form.materialNo = res.data.result.materialNo;
              // this.form.totalPartNo = res.data.result.totalPartNo;
              // this.form.sampleStatusPhase = res.data.result.sampleStatusPhase;
              // this.form.materialFurnanceNumber = res.data.result.materialFurnanceNumber;
              // this.form.heatingNumber = res.data.result.heatingNumber;
              // this.form.sampleStatus = res.data.result.sampleStatus;
              // this.form.quantity = res.data.result.quantity;
              // this.form.batchNumber = res.data.result.batchNumber;
              // this.form.provider = res.data.result.provider;
              // this.form.remark = res.data.result.remart;
              // this.form.taskTarget = taskTarget;
              this.form = res.data.result;

              if (!this.form.applyUser) {
                this.form.applyUser = {};
              }

              //this.form.approver = localStorage.getItem("username")
              this.form.reason = '';

//              if (!this.form.result && this.form.result != 0) {
//                this.form.result = 1;
//              }

              if (this.form.taskFieldList) {
                for (let i = 0; i < this.form.taskFieldList.length; i++) {
                  this.form.taskFieldList[i].displayId = i + 1;
                  this.form.taskFieldList[i].testPartStr = getLableFromList(this.positionList, this.form.taskFieldList[i].testPart);
                }
              }

              this.tableData = this.form.taskFieldList;
              for (let i = 0; i < this.tableData.length; i++) {
                this.tableData[i].displayId = i + 1;
                this.tableData[i].testPartStr1 = this.tableData[i].testPart;
              }


            })
        }
      }
    },
    methods: {
      getPosition(type) {
        return getLableFromList(this.positionList, type);
      },
      getType(t) {
        return getLableFromList(APPLY_TYPE_LIST, t);
      },
      handleClose() { /* 关闭的时候更新状态值 */
        this.isFullScreen = false;
        this.dialogVisible = false;
        this.$refs['form'].resetFields();
      },
      handleClick(tab, event) {
        // console.log(tab, event);
      },
      // 提交
      submitCheck(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.form);
            if (!this.form.result && this.form.result != 0) {
              this.$alert('请选择审批结果', '提示', {
                type: 'error'
              })
              return;
            }
            if (this.form.result === 0 && this.form.reason === '') {
              this.$alert('请输入拒绝原因', '提示', {
                type: 'error'
              })
              return;
            }
            postApplyAuditService(this.orderid, this.form.result, this.form.reason)
              .then(res => {
                // console.log(res)
                if (res.data.success) {
                   this.$message({
            message: res.data.message,
            type: 'success',
            duration: 1000
            });
                }
                this.dialogVisible = false;
              })
          } else {
            changeFormitemSpace(document);
            return false;
          }
        });
      }
    }
  }
</script>
